<link rel="stylesheet" href="/static/css/reset.css">
<link rel="stylesheet" href="/static/css/pagination.css">
<link rel="stylesheet" href="/static/lib/layui/css/layui.css">
<link rel="stylesheet" href="/cdn/layui-ul-change.css">
<link rel="stylesheet" href="/static/css/common.css">
<script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
<script src="/static/lib/jquery/jquery.cookie.js"></script>
<script src="/static/lib/layui/layui.js"></script>
<script src="/static/js/common.js"></script>

<script>

  //JavaScript代码区域
  layui.use(['element', 'layer', 'util'], function () {
    var element = layui.element;

    $('.layui-side').addClass('layui-hide-xs')

  });

  $(function () {
    var skinName = $.cookie('skin-name')

    $('body').addClass(skinName)
    setTimeout(() => {
      if (typeof currentHeaderNavItem != "undefined") {
        $('.header-nav-item').each(function (i, e) {
          if ($(e).data('name') == currentHeaderNavItem) {
            $(e).addClass('layui-this')
          }
        })
      }
      if (typeof currentLeftNavItem != "undefined") {
        $('.left-nav-item').each(function (i, e) {
          if ($(e).data('name') == currentLeftNavItem) {
            $(e).addClass('layui-this')
          }
        })
      }


      // 表格转卡片



      var tableContainer = $('.layui-table').parent()

      $('.layui-table').addClass('layui-hide-xs')

      var cardList = $('<div class="table-card layui-show-xs-block layui-hide-md"></div>').prependTo(tableContainer)

      $('.layui-table tbody tr').each(function () {
        var trItem = this;

        var boxItem = $('.tpl .table-card-box').clone()

        $.each($(trItem).data(), function (index, value) {

          $(boxItem).data(index, value)
        })

        $(trItem).find('td').each(function (index, ele) {
          var itemItem = $('.tpl .table-card-item').clone()
          $(itemItem).find('.item-title').text($('.layui-table thead th').eq(index).text())

          if ($(ele).children().length == 0) {
            $(itemItem).find('.item-value').html($(ele).html())
          } else {

            $(ele).children().clone().appendTo($(itemItem).find('.item-value'))
          }

          $(itemItem).appendTo(boxItem)
        })

        $(boxItem).appendTo(cardList)
      })

    }, 1);


  })
</script>

<div class="tpl" style="display: none;">
  <div class="table-card-box item">

  </div>
  <div class="table-card-item">
    <div class="item-title"></div>
    <div class="item-value"></div>
  </div>
</div>